<template>
	<view class="box">
		<view class="top">
			<swiper style="height: 650rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item style="height: 100%;">
					<view class="swiper-item">
						<image src="../../static/images/home/20220416035813.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/images/home/20220416040222.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="center">
			<view class="c_box">
				<view class="c_left">
					<view class="imgbox" @tap="map">
						<view class="img">
							<image src="../../static/images/home/foot.png" mode=""></image>
						</view>
						<text class="tip1">点餐</text>
						<text class="tip2">在线点单,送餐上门</text>
					</view>
				</view>
				<view class="xian">
					<view class="p">

					</view>
				</view>
				<view class="c_right">
					<view class="imgbox">
						<view class="imgbox">
							<view class="img">
								<image id="cycling" src="../../static/images/home/cycling.png" mode=""></image>
							</view>
							<text class="tip1">外卖</text>
							<text class="tip2">美味上门</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="foot">
			<view class="f_box">
				<view class="p_imgbox">
					<image src="../../static/images/home/add.png" mode=""></image>
				</view>
				<view class="p_box">
					<text class="p1">加盟咨询</text>
					<text class="p2">400-820-8820</text>
				</view>
			</view>
			<view class="f_box">
				<view class="p_imgbox">
					<image src="../../static/images/home/vip.png" mode=""></image>
				</view>
				<view class="p_box">
					<text class="p1">点点会员</text>
					<text class="p2">享更多会员好礼</text>
				</view>
			</view>
			<view class="f_box">
				<view class="p_imgbox">
					<image src="../../static/images/home/video1.png" mode=""></image>
				</view>
				<view class="p_box">
					<text class="p1">视频号</text>
					<text class="p2">美味先睹为快</text>
				</view>
			</view>
		</view>

		

	</view>
</template>

<script>
	import {
		request
	} from "../../static/utils/request.js"
	import {
		test
	} from "./components/test.vue"
	export default {
		components: {
			test,
		},
		data() {
			return {
				code: '',
			}
		},
		mounted() {
			wx.cloud.callFunction({
			  name:'openid',
			  data:{
			    message:'helloCloud',
			  }
			}).then(res=>{
			  console.log(res.result.openid,1234567)
			  uni.setStorageSync('openid',res.result.openid)
			}).catch((err) => {
				console.log('失败')
			})
			
			
		},
		methods: {
			handle() {
				request.post('/test1', {
						name: '李四'
					})
					.then((data) => {
						console.log(data)
					})
					.catch(err => {
						console.log(err)
					})

			},
			map() {
				let status = false
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {},
					fail: () => {

					}
				});
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							uni.navigateTo({
								url: '../location/location'
							})
							return
						} else {
							uni.navigateTo({
								url: '../map/map'
							})
						}
					}
				})

			},
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: #F0F0F0;
	}

	.top {
		width: 100%;
		height: 650rpx;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.top image {
		width: 100%;
		height: 100%;
	}

	.center {
		width: 100%;
		height: 315rpx;
		position: relative;
	}

	.c_box {
		width: 95%;
		height: 340rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0px 0px 5px #c7c7c7;
	}

	.c_box>view {
		width: 49%;
		height: 100%;
		float: left;
		position: relative;
	}

	.c_box .xian {
		width: 2%;
		height: 100%;
		position: relative;
	}

	.c_box .xian .p {
		width: 1.25px;
		height: 60%;
		background-color: #e0e0e0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.c_box .imgbox {
		width: 70%;
		height: 90%;
		/* background-color: #F1F1F1; */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.c_box .imgbox .img {
		width: 100%;
		height: 50%;
		position: relative;
		margin-top: 20rpx;
	}

	.c_box .imgbox image {
		width: 170rpx;
		height: 170rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.imgbox text {
		text-align: center;
		display: block;
	}

	.imgbox .tip1 {
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.imgbox .tip2 {
		color: #939395;
		font-size: 0.8rem;
		margin-top: 20rpx;
	}

	#cycling {
		width: 150rpx;
		height: 170rpx;
	}

	.foot {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: space-around;
	}

	.f_box {
		width: 30%;
		height: 230rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.f_box>view {
		width: 100%;
		height: 50%;
		position: relative;
	}

	.f_box image {
		width: 85rpx;
		height: 85rpx;
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.f_box text {
		text-align: center;
		display: block;
		margin-top: 5rpx;
	}

	.f_box .p1 {
		color: #343434;
		font-size: 1rem;
		font-weight: 600;
		margin-top: 10px;
	}

	.f_box .p2 {
		color: #939395;
		font-size: 0.7rem;
	}
</style>
